<template>
	<view>
		<view class="categoryTitle">
			<view class="categoryImg">
				<image mode="aspectFit" src="@/static/image/book.jpg"></image>
				<view class="bookTitle">{{this.title}}</view>
			</view>
			<view class="categoryInfo">
				<view>{{this.title}}</view>
				<view>作者:{{this.author}}</view>
			</view>
		</view>
		<view class="categoryMain">
			<view class="uni-padding-wrap uni-common-mt">
				<uni-segmented-control :current="current" :values="items" :style-type="styleType"
					:active-color="activeColor" @clickItem="onClickItem" />
			</view>
			<view class="content">
				<view v-if="current === 0"><text class="content-text">{{this.briefIntroduction}}</text></view>
				<view v-if="current === 1">
					<view class="categoryItem" v-for="(cate,index) in categoryList" :key="cate.chapterId"
						@click="getBookCharpet(cate.chapterId,cate.title)">
						<text>{{index+1}}.</text>{{cate.title}}
					</view>
				</view>
				<view v-if="current === 2"><text class="content-text">选项卡3的内容</text></view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '@/request/api.js';
	export default {
		data() {
			return {
				title: "",
				coverImage: '',
				briefIntroduction: "",
				author: "",
				option: {},
				items: ['简介', '目录', '待定'],
				current: 0,
				activeColor: '#007aff',
				styleType: 'text',
				bookUuid: "",
				categoryList: []
			}
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			this.option = JSON.parse(option.bookInfo)
			this.title = this.option.title
			this.coverImage = this.option.coverImage
			this.briefIntroduction = this.option.briefIntroduction
			this.author = this.option.author
			this.bookUuid = this.option.uuid

			uni.setNavigationBarTitle({
				title: this.option.title || ''
			})
		},
		methods: {
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
				this.getCategoryList()
			},
			getCategoryList() { //获取目录接口
				api.get('/tableOf/v1/getByBookUuid', {
					bookUuid: this.bookUuid
				}).then(res => {
					this.categoryList = res.list
				}).catch(err => {
					console.log(err)
				})
			},
			getBookCharpet(id,title,bookUuid){
				uni.navigateTo({
				  url: '/pages/component/bookChapter/bookChapter?id='+id+'&title='+title+'&bookUuid='+this.bookUuid
				  })
			}
		}
	}
</script>

<style scoped>
	.categoryTitle {
		width: 100%;
		height: 20%;
		border-bottom: 1px solid #cecece;
		display: flex;
		justify-content: flex-start;
		padding: 15px;
		background: #33398b;
	}

	.categoryImg {
		width: 20%;
		position:relative;
	}
    .bookTitle{
		position:absolute;
		background:#fff;
		width:30%;
		top:10px;
		left:10px;
		font-size:29rpx;
		text-align: center;
		border:1px solid #f5ef2f;
		box-shadow: 2px 5px 10px #f7facb;
	}
	.categoryImg>image {
		width: 100%;
		height: 240rpx;
	}

	.categoryInfo {
		margin-left: 10px;
	}

	.categoryInfo view {
		color: #fff;
		height: 30px;
		line-height: 30px;
	}

	.categoryInfo view:nth-child(1) {
		font-size: 36rpx;
	}

	.categoryInfo view:nth-child(2) {
		font-size: 32rpx;
	}

	.categoryMain {
		padding: 0 10px;
	}

	.content {
		height:329px;
		overflow-y: scroll;
	}

	.content .content-text:nth-child(1) {
		font-size: 14px;
		text-indent: 28px;
		margin-top: 10px;
	}

	.categoryItem {
		font-size: 14px;
		height: 40px;
		line-height: 40px;
		border-bottom: 1rpx solid #e6e6e6;
	}

	.categoryItem text {
		margin-right: 10px;
	}
</style>